<template>
    <div class="id_card">
        <div class="img_con">
            <upload-img :baseUrl="idcard_front" :imgUrl.sync="formData.certificatePictureFront" desc="请上传身份证头像面" fileType="002" @ocrBack="ocrBack"></upload-img>
        </div>
        <div class="img_con">
            <upload-img :baseUrl="idcard_back" :imgUrl.sync="formData.certificatePictureBack" desc="请上传身份证国徽面" fileType="003" @ocrBack="ocrBack"></upload-img>
        </div>
        <div class="img_con" v-if="showType==1">
            <upload-img :imgUrl.sync="formData.certificatePictureHold" desc="请上传手持身份证" fileType="009"></upload-img>
        </div>
        <van-cell-group title="信息确认">
            <van-field label="姓名" v-model="formData.certificateName" placeholder="输入姓名" />
            <van-field label="身份证号" v-model="formData.certificateId" placeholder="请输入身份证号" />
            <van-cell title="是否长期">
                <template #right-icon>
                    <vant-switch v-model="isLong" />
                </template>
            </van-cell>
            <template v-if="!isLong">
                <!-- <van-cell title="开始日期" :value="formData.certificateExpireDate" @click="$refs.startDate.show()" is-link></van-cell> -->
                <van-cell title="结束日期" :value="formData.certificateExpireDate" @click="$refs.expireDate.show()" is-link></van-cell>
            </template>
        </van-cell-group>
        <!-- <time-picker ref="startDate" :minDate="new Date()" @commit="timeCommit($event,'certificateExpireDate')"></time-picker> -->
        <time-picker ref="expireDate" :minDate="new Date()" @commit="timeCommit($event,'certificateExpireDate')"></time-picker>
    </div>
</template>

<script>
import { Switch } from "vant";
import { mapState } from "vuex";

import uploadImg from "@/components/form/upload-img";
import TimePicker from "@/components/picker/timePicker";

export default {
    props: {
        showType: {
            type: String,
            default: 1,
        },
    },

    components: { uploadImg, TimePicker, vantSwitch: Switch },

    data() {
        return {
            idcard_front: require("@/assets/img/comp/idcard_front.png"),
            idcard_back: require("@/assets/img/comp/idcard_back.png"),

            formData: {
                certificateId: "", // 证件号码
                certificateName: "", // 证件姓名
                certificateExpireDate: "", // 证件有效期截止时间

                certificatePictureFront: "", // 身份证正面照地址
                certificatePictureBack: "", // 身份证反面照地址
                certificatePictureHold: "", // 身份证手持照地址
            },
            isLong: false, // 是否长期
        };
    },

    mounted() {
        if (this.$config.appCode === "AGNAPP") {
            this.serverPrepareData();
        } else {
            this.prepareData();
        }
        window.scrollTo(0, 0);
    },

    computed: {
        ...mapState({
            baseData: (state) => state.baseData,
            custInfo: state => state.homeData.custInfo,
            serverInfo: state => state.homeData.serverInfo
        }),
    },

    methods: {
        // 商户版
        prepareData() {
            // 进件状态
            if (["02", "03", '04'].indexOf(this.custInfo.merchantStatus) === -1) {
                return;
            }

            this.$http.collectionIdCard(this.custInfo.merchantCode).then((resp) => {
                if (resp === false) {
                    return resp;
                }
                this.formData = resp;
                if (this.formData.certificateExpireDate == "长期") {
                    this.isLong = true;
                }
            });
        },

        // 服务商版
        serverPrepareData() {
            // 进件状态
            if (["02", "03", '04'].indexOf(this.serverInfo.certifyStatus) === -1) {
                return;
            }

            this.$http.serverCollectionIdCardQuery().then((resp) => {
                if (resp === false) {
                    return resp;
                }
                // resp
                this.formData = {
                    code: this.serverInfo.code,
                    certificateId: resp.legalCertId, // 证件号码
                    certificateName: resp.legalPersonName, // 证件姓名
                    certificateExpireDate: resp.legalCertValidity, // 证件有效期截止时间
                    certificatePictureFront: resp.certificatePictureFront,
                    certificatePictureBack: resp.certificatePictureBack,
                };
                if (this.formData.legalCertValidity == "长期") {
                    this.isLong = true;
                }
            });
            console.log("服务商版");
        },

        ocrBack(e) {
            e.certId && (this.formData.certificateId = e.certId); // 证件号码
            e.name && (this.formData.certificateName = e.name); // 证件姓名
            e.expireDate && (this.formData.certificateExpireDate = e.expireDate); // 证件有效期截止时间
        },

        timeCommit(e, key) {
            this.formData[key] = e;
        },

        submitForm() {
            if (this.isLong) {
                this.formData.certificateExpireDate = "长期";
            }
            if (this.$config.appCode === "AGNAPP") {
                return {
                    code: this.serverInfo.code,
                    legalCertId: this.formData.certificateId,
                    legalPersonName: this.formData.certificateName,
                    legalCertType: "01",
                    legalCertValidity: this.formData.certificateExpireDate,
                    certificatePictureFront: this.formData.certificatePictureFront,
                    certificatePictureBack: this.formData.certificatePictureBack,
                };
            } else {
                return {
                    ...this.formData,
                    merchantCode: this.custInfo.merchantCode,
                };
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.id_card {
    width: 100%;
    .img_con {
        // padding: 10px;
    }
    .var_butt {
        width: 80px;
        margin-left: 10px;
    }
}
</style>
